<template>
	<div class="home">
    
		<div class="control-c">

			<div class="control-left">
				<div class="cross-c">
					<div class="cross-item" @click="turnArround('up')">
						<div data-v-edfc5b8b="" class="arr arr-1"></div>
					</div>
					<div class="cross-item" @click="turnArround('right')">
						<div data-v-edfc5b8b="" class="arr arr-2"></div>
					</div>
					<div class="cross-item" @click="turnArround('left')">
						<div data-v-edfc5b8b="" class="arr arr-3"></div>
					</div>
					<div class="cross-item" @click="turnArround('down')">
						<div data-v-edfc5b8b="" class="arr arr-4"></div>
					</div>
				</div>
				<div class="center-btn"></div>
				
			</div>
		</div>
	</div>

</template>

<script>
export default {
	name: 'HelloWorld',
	components: {},
	data() {
		return {
			fileList: []
		}
	},
	created() {

	},
	methods: {
		turnArround(i) {
			//操作代码

		}
	}

}
</script>

<style  scoped>
.control-c {
	width: 202px;
	height: 202px;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
	border: solid 2px #0a0a0a;

}

.control-left {
	width: 202px;
	height: 202px;
	border-radius: 50%;
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #2f2f30 0%, #1f1f1f 100%);
	border: solid 2px #1b1b1b;
}

.cross-c {
    width: 137px;
    height: 137px;
    display: flex
;
    flex-wrap: wrap;
    transform: rotate(45deg);
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -70px;
    margin-top: -70px;
}

.cross-item {
	width: 68px;
	height: 68px;
	cursor: pointer;
	position: relative;
	border: 1px solid black;
}

.center-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -19px;
    margin-left: -19px;
    border-radius: 24px;
    width: 40px;
    height: 40px;
    border: solid 2px #0a0a0a;
    background: #0a0a0a;
    display: flex
;
    justify-content: center;
    align-items: center;
}

.arr {
	width: 0;
	height: 0;
	border: solid 4px transparent;
	border-bottom-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
}

.arr-1 {
	margin-top: -7px;
	margin-left: -7px;
	transform: rotate(-45deg);
}

.arr-2 {
	margin-top: -8px;
	margin-left: -4px;
	transform: rotate(45deg);
}

.arr-3 {
	margin-top: -3px;
	margin-left: -7px;
	transform: rotate(-135deg);
}

.arr-4 {
	margin-top: -3px;
	margin-left: -1px;
	transform: rotate(135deg);
}
</style>
